<template>
	<view class="flex-col page">
		<view class="flex-col section space-y-61">
			<view class="flex-row justify-center relative">
				<image class="image pos" @click="backpage"
					src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777480137488403283.png" />
				<text class="font_1 text">会员详情</text>
			</view>
			<view class="flex-row group">
				<image class="image_2" :src="vipInfo.userInfo.f_headimgurl" style="border-radius: 50%;" />
				<view class="flex-col flex-auto group_2">
					<view class="flex-row items-center group_3">
						<text class="font_1 text_2">{{vipInfo.userInfo.f_nickName}}</text>
						<text class="font_2">（{{shopname}}）</text>
					</view>
					<view class="flex-row justify-evenly items-center self-start section_2">
						<image class="image_3" src="https://gongxiangtaiqiu.axa2.com/taiqiu/16780696972543589623.png" />
						<text class="font_2">普通用户</text>
						<image class="image_4" src="https://gongxiangtaiqiu.axa2.com/taiqiu/16780696972506296006.png" />
						<text class="font_2 text_3">{{vipInfo.userInfo.f_phone}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-col relative section_4">
			<view class="flex-row section_3 space-x-10">
				<view class="section_5"></view>
				<text class="font_3 text_4">会员详细</text>
			</view>
			<view class="grid">
				<view class="flex-col items-center grid-item space-y-22">
					<text class="font_4">{{vipInfo.balance}}</text>
					<text class="font_6">余额</text>
				</view>
				<view class="flex-col items-center grid-item space-y-23">
					<text class="font_5">{{vipInfo.couponCount}}</text>
					<text class="font_6">卡券</text>
				</view>
				<!-- <view class="flex-col items-center grid-item space-y-22">
					<text class="font_4">30</text>
					<text class="font_6">积分</text>
				</view> -->
				<view class="flex-col items-start grid-item_2 space-y-22">
					<text class="font_4">{{vipInfo.orderMoney}}</text>
					<text class="font_6 text_5">累计营业额</text>
				</view>
				<view class="flex-col items-center grid-item space-y-22">
					<text class="font_4">{{vipInfo.rechargeMoney}}</text>
					<text class="font_6">累计充值</text>
				</view>
				<view class="flex-col items-center grid-item_3 space-y-20">
					<view class="group_4">

						<text class="font_4">{{vipInfo.orderLong}}</text>
					</view>
					<text class="font_6">订单时长</text>
				</view>
			</view>
			<view class="flex-row equal-division space-x-20">
				<view class="flex-col items-center equal-division-item space-y-15">
					<text class="font_7 text_6">{{vipInfo.lastOrderTime}}</text>
					<text class="font_6">上次下单时间</text>
				</view>
				<view class="flex-col items-center equal-division-item space-y-15">
					<text class="font_7 text_6">{{vipInfo.firstOrderTime}}</text>
					<text class="font_6">首次到店时间</text>
				</view>
			</view>
		</view>
		<view class="flex-col">
			<view class="flex-col group_5">
				<view class="flex-row justify-between group_6">
					<view class="mengchong_Main_btn_option" v-for="(item,index) in list2">
						<view @click="changeOpt(item,index)"
							:class="curId === index ? 'mengchong_Main_btn_option_view_active':'mengchong_Main_btn_option_view' ">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col section_7 space-y-30">
				<view v-if="curId==0">
					<view class="flex-row justify-between group_7">
						<view class="flex-col justify-start items-center"
							:class="ballId === index+1?'text-wrapper_3':'text-wrapper_2'" v-for="(item,index) in list1"
							@click="ballOpt(index)">
							<text class="font_9">{{item.name}}</text>
						</view>
					</view>
					<view class="flex-col">
						<view class="flex-row justify-between list-item">
							<u-table style="height: 200px;">
								<scroll-view style="height: 200px;" :scroll-top="scrollTop" scroll-y="true"
									class="scroll-Y" @scrolltolower="lower" @scroll="scroll">
									<u-tr class="u-tr">
										<u-th class="u-th">时间</u-th>
										<u-th class="u-th">类别</u-th>
										<u-th class="u-th">订单金额</u-th>
										<u-th class="u-th">结算金额</u-th>
									</u-tr>
									<u-tr class="u-tr" v-for="item in kaitaiInfo">
										<u-td class="u-td" style="font-size: 12px;">{{item.f_start_time}}</u-td>
										<u-td class="u-td">{{item.f_eq_type=='1'?'台球':'棋牌'}}</u-td>
										<u-td class="u-td">{{item.f_sync_money}}</u-td>
										<u-td class="u-td">{{item.f_pay_money}}</u-td>
									</u-tr>
								</scroll-view>
							</u-table>
						</view>
					</view>
					<view v-if="kaitaiInfo.length==0">
						<view style="width: 100px; height: 120px; margin: auto;  margin-top: 50px;">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/nonedetail.png"
								style="width: 100%; height: 100%;">
							</image>
						</view>
						<view class="none-d">暂无数据</view>
					</view>
				</view>

				<view class="none" v-if="curId==1">
					<view v-for="item in RechargeList" class="orderbox">
						<view class="order">订单编号：{{item.f_wx_no}}</view>
						<view class="order">充值金额：{{item.f_money}}</view>
						<view class="order">订单时间：{{item.created_at}}</view>
					</view>
					<view v-if="RechargeList==''">
						<view style="width: 100px; height: 120px; margin: auto;  margin-top: 50px;">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/nonedetail.png"
								style="width: 100%; height: 100%;">
							</image>
						</view>
						<view class="none-d">暂无数据</view>
					</view>
				</view>
				<view class="none" v-if="curId==2">
					<view v-for="item in juanInfo" class="orderbox">
						<view class="order">卡券编号：{{item.f_wx_no}}</view>
						<view class="order">卡券金额：{{item.f_money}}</view>
						<view class="order">赠送金额：{{item.f_gift_money}}</view>
					</view>
					<view v-if="juanInfo==''">
						<view style="width: 100px; height: 120px; margin: auto;  margin-top: 50px;">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/nonedetail.png"
								style="width: 100%; height: 100%;">
							</image>
						</view>
						<view class="none-d">暂无数据</view>
					</view>
				</view>
				<view class="none" v-if="curId==3">
					<view style="width: 100px; height: 120px; margin: auto;  margin-top: 50px;">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/nonedetail.png"
							style="width: 100%; height: 100%;">
						</image>
					</view>
					<view class="none-d">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				shopname: uni.getStorageSync('Bshop_name'),
				ballId: 1,
				curId: 0,
				list1: [{
					name: '台球'
				}, {
					name: '棋牌'
				}],
				list2: [{
						name: '开台记录'
					}, {
						name: '充值记录'
					}, {
						name: '卡券记录'
					},
					{
						name: '其他记录'
					}
				],
				current: 0,
				vipInfo: {},
				RechargeList: [],
				vipid: '',
				juanInfo: [],
				kaitaiInfo: {},
				loadstatus: 'more',
				isRefresh: 0,
				page: 1,
			};
		},
		onLoad(option) {
			this.vipid = option.id
			this.vipdetail()
			this.kaitai()
			// this.chongzhi()
			this.isRefresh = 1;
			console.log(this.isRefresh, '111')
		},
		onPullDownRefresh() {
			this.isRefresh = 1;
			this.loadstatus = 'more';
			this.page = 1;
			switch (this.curId) {
				case 0:
					this.kaitai()
					break;
				case 1:
					this.chongzhi()
					break;
				case 2:
					this.juan()
					break;
			}
		},
		onReachBottom() {
			if (this.loadstatus !== 'more') {
				return;
			}
			this.loadstatus = '加载中...';
			this.isRefresh = 0;
			switch (this.curId) {
				case 0:
					this.kaitai()
					break;
				case 1:
					this.chongzhi()
					break;
				case 2:
					this.juan()
					break;
			}
		},
		methods: {
			lower(e) {
				if (this.loadstatus !== 'more') {
					return;
				}
				this.isRefresh = 0;
				this.kaitai()
			},
			scroll(e) {},
			vipdetail() {
				this.$Api.shopGetMemberUserInfo({
					userId: this.vipid,
					shopId: uni.getStorageSync('Bshop_id'),
					// shopId:61
				}).then(res => {
					this.vipInfo = res.data.data
				});
			},
			ballOpt(index) {
				this.page = 1;
				this.ballId = index + 1
				this.kaitai()
				// this.chongzhi()
				console.log(this.ballId, '开台 棋牌ballOpt')
			},
			chongzhi() {
				this.$Api.shopGetRechargeLog({
					page: this.page,
					pageNum: 10,
					userId: this.vipid,
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					// this.RechargeList = res.data.data.list
					if (res.data.data.list.length > 0) {
						if (this.isRefresh) {
							this.RechargeList = res.data.data.list;
						} else {
							this.RechargeList = this.RechargeList.concat(res.data.data.list);
						}
						console.log(res.data.data.list.length, this.page, 'chongzhi')
						if (res.data.data.list.length != 10) {
							this.loadstatus = '到底了...';
						} else {
							this.loadstatus = 'more';
							this.page++;
						}
					} else {
						this.loadstatus = '到底了...';
					}
					console.log(this.RechargeList, '充值列表')
				});
			},
			juan() {
				this.$Api.shopGetCouponLog({
					page: this.page,
					pageNum: 10,
					userId: this.vipid,
					shopId: uni.getStorageSync('Bshop_id'),
				}).then(res => {
					this.juanInfo = res.data.data.list
				});
			},
			kaitai() {
				this.$Api.shopGetOrderLog({
					type: this.ballId, //1台球 2棋牌
					userId: this.vipid,
					shopId: uni.getStorageSync('Bshop_id'),
					// shopId:61,
					pageNum: 10,
					page: this.page,
				}).then(res => {
					// this.kaitaiInfo = res.data.data.list
					if (res.data.data.list.length > 0) {
						if (this.isRefresh) {
							this.kaitaiInfo = res.data.data.list;
						} else {
							this.kaitaiInfo = this.kaitaiInfo.concat(res.data.data.list);
						}
						console.log(res.data.data.list.length, this.page, 'kaitai')
						if (res.data.data.list.length != 10) {
							this.loadstatus = '到底了...';
						} else {
							this.loadstatus = 'more';
							this.page++;
						}
					} else {
						this.loadstatus = '到底了...';
					}
					console.log(this.kaitaiInfo, '开台列表')
				})
			},
			changeOpt(item, index) {
				this.curId = index
				this.page = 1
				this.kaitaiInfo = []
				this.RechargeList = []
				switch (this.curId) {
					case 0:
						this.kaitai()
						break;
					case 1:
						this.chongzhi()
						break;
					case 2:
						this.juan()
						break;
				}
				console.log(this.curId, 'changeOpt')
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				})
			}
		},

	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	/deep/ .u-th {
		width: 190rpx;
		height: 98rpx;
		background: #F3FCF7 !important;

	}


	.none-d {
		width: 150rpx;
		margin: auto;
		height: 35rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		margin-top: 20rpx;
	}

	.u-tr {
		height: 98rpx;
	}

	.orderbox {
		width: 100%;
		height: 60px;
		border: 1px solid #eeeeee;
		margin-bottom: 10px;
	}

	.order {
		width: 200px;
		height: 20px;
		font-size: 12px;

	}

	/deep/ .u-table {}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.mengchong_Main_btn_option {
		margin-right: 20rpx;

	}

	.mengchong_Main_btn_option_view_active {
		width: 115rpx;
		height: 36rpx;
		font-size: 27rpx;
		color: #1B1B1B;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.mengchong_Main_btn_option_view_active::after {
		content: "";
		position: absolute;
		left: 36rpx;
		bottom: -10px;
		width: 40rpx;
		height: 10rpx;
		border-bottom: 4rpx solid #25D9C4;
	}

	.mengchong_Main_btn_option_view {
		width: 115rpx;
		height: 36rpx;
		font-size: 27rpx;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.page {
		background-color: #f3f3f5;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.section {
		padding: 104rpx 23rpx 281rpx;
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/16780696972213475879.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.space-y-61>view:not(:first-child),
	.space-y-61>text:not(:first-child),
	.space-y-61>image:not(:first-child) {
		margin-top: 61rpx;
	}

	.image {
		width: 20rpx;
		height: 34rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.font_1 {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: #ffffff;
	}

	.text {
		line-height: 34rpx;
	}

	.group {
		padding: 0 10rpx;
	}

	.image_2 {
		width: 120rpx;
		height: 120rpx;
	}

	.group_2 {
		margin: 10rpx 0 5rpx 29rpx;
	}

	.group_3 {
		padding-bottom: 20rpx;
	}

	.text_2 {
		line-height: 33rpx;
	}

	.font_2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.section_2 {
		padding: 6rpx 29rpx;
		background-color: #2aa37a;
		border-radius: 26rpx;
		width: 450rpx;
	}

	.image_3 {
		width: 32rpx;
		height: 41rpx;
	}

	.image_4 {
		width: 36rpx;
		height: 35rpx;
	}

	.text_3 {
		line-height: 20rpx;
	}

	.section_4 {
		margin: -247rpx 30rpx 0;
		padding-bottom: 27rpx;
		background-color: #ffffff;
		border-radius: 24rpx;
	}

	.section_3 {
		padding: 41rpx 30rpx 20rpx;
		background-image: linear-gradient(0deg, #ffffff 0%, #efffec 100%);
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 10rpx;
	}

	.section_5 {
		background-color: #19c865;
		border-radius: 1.5rpx;
		width: 4rpx;
		height: 26rpx;
	}

	.font_3 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 700;
		color: #222222;
	}

	.text_4 {
		line-height: 26rpx;
	}

	.grid {
		padding: 0 22rpx;
		height: 252rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-item {
		padding: 24rpx 0;
	}

	.font_4 {
		font-size: 40rpx;
		font-family: PingFang SC;
		line-height: 31rpx;
		font-weight: 700;
		color: #222222;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #999999;
	}

	.space-y-23>view:not(:first-child),
	.space-y-23>text:not(:first-child),
	.space-y-23>image:not(:first-child) {
		margin-top: 23rpx;
	}

	.font_5 {
		font-size: 40rpx;
		font-family: PingFang SC;
		line-height: 30rpx;
		font-weight: 700;
		color: #222222;
	}

	.grid-item_2 {
		padding: 24rpx 22rpx 24rpx 38rpx;
	}

	.space-y-22>view:not(:first-child),
	.space-y-22>text:not(:first-child),
	.space-y-22>image:not(:first-child) {
		margin-top: 22rpx;
	}

	.text_5 {
		margin-left: 4rpx;
	}

	.grid-item_3 {
		padding: 26rpx 0;
	}

	.space-y-20>view:not(:first-child),
	.space-y-20>text:not(:first-child),
	.space-y-20>image:not(:first-child) {
		margin-top: 20rpx;
	}

	.group_4 {
		line-height: 30rpx;
	}

	.equal-division {
		margin-top: 28rpx;
	}

	.space-x-20>view:not(:first-child),
	.space-x-20>text:not(:first-child),
	.space-x-20>image:not(:first-child) {
		margin-left: 20rpx;
	}

	.equal-division-item {
		flex: 1 1 335rpx;
		padding: 10rpx 0;
	}

	.space-y-15>view:not(:first-child),
	.space-y-15>text:not(:first-child),
	.space-y-15>image:not(:first-child) {
		margin-top: 15rpx;
	}

	.font_7 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 700;
		color: #222222;
	}

	.text_6 {
		line-height: 20rpx;
	}

	.group_5 {
		padding: 39rpx 37rpx 31rpx 42rpx;
	}

	.group_6 {
		padding: 13rpx 0;
	}

	.text_7 {
		line-height: 26rpx;
	}

	.font_8 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #8b8b8b;
	}

	.text_8 {
		line-height: 26rpx;
	}

	.text_9 {
		line-height: 27rpx;
	}

	.text_10 {
		line-height: 26rpx;
	}

	.section_6 {
		margin-left: 30rpx;
		background-color: #19c865;
		border-radius: 2rpx;
		width: 40rpx;
		height: 4rpx;
	}

	.section_7 {
		padding: 29rpx 27rpx 136rpx 33rpx;
		background-color: #ffffff;
	}

	.space-y-30>view:not(:first-child),
	.space-y-30>text:not(:first-child),
	.space-y-30>image:not(:first-child) {
		margin-top: 30rpx;
	}

	.group_7 {
		padding: 0 80rpx;
	}

	.text-wrapper {
		padding: 18rpx 0;
		background-color: #19c865;
		border-radius: 8rpx;
		width: 168rpx;
		height: 60rpx;
	}

	.text-wrapper_3 {
		padding: 18rpx 0;
		border-radius: 8rpx;
		width: 168rpx;
		height: 60rpx;
		background-color: #19c865;

	}

	.text_11 {
		font-weight: 700;
	}

	.text-wrapper_2 {
		padding: 18rpx 0;
		background-color: #f3f3f5;
		border-radius: 8rpx;
		width: 168rpx;
		height: 60rpx;
	}

	.font_9 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #222222;
	}

	.list-item {
		padding: 36rpx 29rpx;
		border-radius: 16rpx 16rpx 0px 0px;
		width: 350px;
		height: 200px;
		display: flex;
		justify-content: start;
		align-items: center;
		overflow: scroll;
		margin-top: 20px;
	}

	.font_10 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 700;
		color: #222222;
	}

	.group_8 {
		margin-right: 5rpx;
	}

	.space-x-101>view:not(:first-child),
	.space-x-101>text:not(:first-child),
	.space-x-101>image:not(:first-child) {
		margin-left: 101rpx;
	}

	.space-x-84>view:not(:first-child),
	.space-x-84>text:not(:first-child),
	.space-x-84>image:not(:first-child) {
		margin-left: 84rpx;
	}
</style>